<template>
  <div class="float-layer">
    <el-radio-group v-model="network">
      <el-radio
        class="check-block radio-p-5"
        label="3+"
        @click.native.prevent="judgeSame('3+', 1)"
        >全部用户分布</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="3+4"
        @click.native.prevent="judgeSame('3+4', 1)"
        >4G用户分布</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="3+5"
        @click.native.prevent="judgeSame('3+5', 1)"
        >5G用户分布</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="6+"
        @click.native.prevent="judgeSame('6+', 1)"
        >5G用户4G网络</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="1+4"
        @click.native.prevent="judgeSame('1+4', 1)"
        >4G网络覆盖</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="1+5"
        @click.native.prevent="judgeSame('1+5', 1)"
        >5G网络覆盖</el-radio
      >
      <el-radio
        class="check-block radio-p-5"
        label="4+4"
        @click.native.prevent="judgeSame('4+4', 1)"
        >4G网络质量</el-radio
      >
      <!-- @fixme 根据yj意见进行隐藏 -->
      <!-- <el-radio class="check-block radio-p-5" label="4+5" @click.native.prevent="judgeSame('4+5', 1)" >5G网络质量</el-radio> -->
      <!-- <el-radio class="check-block radio-p-5" label="5+4" @click.native.prevent="judgeSame('5+4', 1)" >4G漫入用户分布</el-radio>
      <el-radio class="check-block radio-p-5" label="5+5" @click.native.prevent="judgeSame('5+5', 1)" >5G漫入用户分布</el-radio> -->
    </el-radio-group>

    <div class="cult-off-line"></div>

    <!-- <el-radio-group v-model="allBoundaryType"  >
      <el-radio v-show="showZone" class="check-block" :label="1" @click.native.prevent="judgeSame(1, 2)" >区县</el-radio>
      <el-radio v-show="showZone" class="check-block" :label="2" @click.native.prevent="judgeSame(2, 2)" >街道</el-radio>
      <el-radio v-show="showNetwork" class="check-block " :label="4" @click.native.prevent="judgeSame(4, 2)" >网格</el-radio>
      <el-radio v-show="showNetwork" class="check-block " :label="5" @click.native.prevent="judgeSame(5, 2)" >微格</el-radio>
    </el-radio-group> -->

    <div class="float-group" v-show="showZone || showNetwork">
      <div>边界</div>
      <div>
        <el-radio-group v-model="allBoundaryType" class="m-l20">
          <el-radio
            v-show="showZone"
            class="check-block"
            :label="1"
            @click.native.prevent="judgeSame(1, 2)"
            >区县边界</el-radio
          >
          <el-radio
            v-show="showZone"
            class="check-block"
            :label="2"
            @click.native.prevent="judgeSame(2, 2)"
            >街道边界</el-radio
          >
          <el-radio
            v-show="showNetwork"
            class="check-block"
            :label="4"
            @click.native.prevent="judgeSame(4, 2)"
            >网格边界</el-radio
          >
          <el-radio
            v-show="showNetwork"
            class="check-block"
            :label="5"
            @click.native.prevent="judgeSame(5, 2)"
            >微格边界</el-radio
          >
        </el-radio-group>
      </div>
    </div>
    <!-- <div class="float-group" v-show="showNetwork">
      <div>业务区</div>
      <div>
        <el-radio-group v-model="allBoundaryType" class="m-l20">
          <el-radio class="check-block " :label="4" @click.native.prevent="judgeSame(4,2)" >网格</el-radio>
          <el-radio class="check-block " :label="5" @click.native.prevent="judgeSame(5,2)" >微格</el-radio>
        </el-radio-group>
      </div>
    </div> -->
    <div class="cult-off-line"></div>

    <div class="float-group">
      <div>工参</div>
      <div>
        <el-checkbox-group v-model="communityList" class="m-l20">
          <el-checkbox class="check-block" label="2+4"
            ><span>4G工参</span></el-checkbox
          >
          <el-checkbox class="check-block" label="2+5"
            ><span>5G工参</span></el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>

    <!-- <div class="float-group">
      <div>自定义</div>
      <div>
        <el-checkbox-group v-model="customList" class="m-l20">
          <el-checkbox class="check-block" label="12" ><span >家宽</span></el-checkbox>
          <el-checkbox class="check-block" :label="11" ><span >营业厅</span></el-checkbox>
        </el-checkbox-group>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapMutations: mapMutationsForm } = createNamespacedHelpers('gisForm')

export default {
  components: {},
  name: 'FloationLayer',
  props: {},
  data: () => ({
    group1: -1,
    showZone: false,

    showNetwork: false
  }),
  watch: {
    form(a) {
      console.log(a)
    }
  },
  computed: {
    ...mapState(['home', 'gisForm']),
    network: {
      get() {
        console.log(this.gisForm)
        return this.gisForm.network
      },
      set(nv) {
        this.setNetwork(nv)
      }
    },
    allBoundaryType: {
      get() {
        return this.gisForm.allBoundaryType
      },
      set(nv) {
        this.setAllBoundaryType(nv)
      }
    },
    communityList: {
      get() {
        return this.gisForm.communityList
      },
      set(nv) {
        this.setCommunityList(nv)
      }
    },
    customList: {
      get() {
        return this.gisForm.customList
      },
      set(nv) {
        this.setCustomList(nv)
      }
    }
  },
  created() {
    this.showZone =
      this.home.userInfoVo.authorities.indexOf('zone-sort') !== -1
        ? true
        : false
    this.showNetwork =
      this.home.userInfoVo.authorities.indexOf('net-grid-sort') !== -1
        ? true
        : false
  },
  methods: {
    ...mapMutationsForm([
      'setNetwork',
      'setAllBoundaryType',
      'setCommunityList',
      'setCustomList'
    ]),

    //  单选 点击取消
    judgeSame(e, type) {
      if (e != null) {
        let attr = ''
        if (type == 1) {
          attr = 'network'
        } else if (type == 2) {
          attr = 'allBoundaryType'
        }
        if (!attr) return

        if (this[attr] == e) {
          this[attr] = null
        } else {
          this[attr] = e
        }
      }

      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
.float-layer {
  width: 120x;
  .float-group {
    > div:first-child {
      margin-left: 15px;
      margin-bottom: 5px;
    }
    padding-bottom: 10px;
  }
}
.check-block {
  display: block;
  padding: 2px 10px;
}
.radio-p-5 {
  padding-bottom: 5px;
  padding-top: 5px;
}
.m-l20 {
  margin-left: 20px;
}
.f-s12 {
  font-size: 12px;
}

.cult-off-line {
  background-color: #eee;
  height: 1px;
  width: 85%;
  margin: 3px auto;
}
</style>
